{% extends 'layout.html' %}
{% load static %}
{% block CSS %}
    <link rel="stylesheet" href="{% static 'elementui/theme-chalk/index.css' %}">

    <style>
        .tableuy {

            position: absolute;
            top: 10px;
            left: 5%;

        }

        .nav_table {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            margin-right: 30px;

        }


        .add_but_style {
            margin-right: 10px;
        }


        .uy {
            position: absolute;
            top: 10px;
            left: 10%;
        }

        .table_check {
            display: flex;
            justify-content: space-between;
            align-items: center;

        }

        .table_check input[type=checkbox] {
            width: 50px;
            background-color: #f0f0f0;


        }

        .table_check input[type=text] {
            width: 300px;
        }

        .table_check select {
            width: 400px;
        }

        .searchinput {
            width: 400px;
        }

        .resource-page {
            display: flex;
            justify-content: center;
            align-items: center;
        }


        .el-input.is-disabled .el-input__inner {
            background-color: #F5F7FA;
            border-color: #E4E7ED;
            color: #0f0f0f;
            cursor: not-allowed;
        }

    </style>


{% endblock %}

{% block content %}
    <div id="app" class="tableuy" style="width: 90%;position:relative; margin-top: 10px">
        <div class="nav_table">
            <div>
                <el-button type="primary" icon="el-icon-s-data" plain style="margin-right: 10px"
                           @click="getUserEchartData">
                    查看个人绩效
                </el-button>
            </div>

            {#            <el-select class="sort_style" v-model="Form.deposit_amount" placeholder="请选择排序方法">#}
            {#                <el-option v-for="item in sort_method_list" :key="item.id" :label=item.name#}
            {#                           :value="item.id" @click.native="getItemId(item.id)"></el-option>#}
            {#            </el-select>#}
            <div>
                <el-button type="success" icon="el-icon-plus" plain style="margin-right: 10px" @click="addRow">新建客户
                </el-button>
                <el-input placeholder="请输入姓名进行查找" style="width: 300px" v-model="inputText" clearable
                          @clear="receive_data()">
                    <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                </el-input>
            </div>

        </div>


        <div class="panel panel-default">

            <div class="panel-heading">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true" style="margin-right: 2px"></span>
                客户列表
            </div>
            <div class="panel-body">
                <el-table
                        :cell-style="cellStyle"
                        :header-cell-style="headStyle"
                        :data="schArr"
                        v-loading="loading"
                        border
                        stripe
                        style="width: 100%;text-align: center"
                        @sort-change="sortChange"
                        max-height="600">
                    <el-table-column

                            sortable="custom"
                            prop="oid"
                            label="编号"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            fixed
                            sortable="custom"
                            prop="name"
                            label="姓名"
                            width="80">
                    </el-table-column>

                    <el-table-column
                            sortable="custom"
                            prop="gender"
                            label="性别"
                            width="50">

                    </el-table-column>

                    <el-table-column
                            sortable="custom"
                            prop="deposit_amount"
                            label="资产量"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            sortable="custom"
                            prop="customer_relationship_type"
                            label="客户关系类型"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            sortable="custom"
                            prop="customer_relationship_state_id"
                            label="客户关系状态"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            sortable="custom"
                            prop="financial_product"
                            label="是否配置了聚金利、中金宝之类的保证金理财产品"
                            width="90">
                    </el-table-column>

                    <el-table-column
                            sortable="custom"
                            prop="fund_products"
                            label="是否配置了大额存单等类货币基金产品"
                            width="80">
                    </el-table-column>


                    <el-table-column
                            sortable="custom"
                            prop="investment_assets"
                            label="是否配置了FI鑫投类和结构化类、债基、中金丰裕类固收以及固收+类产品"
                            width="100">
                    </el-table-column>

                    <el-table-column
                            sortable="custom"
                            prop="add_weChat"
                            label="是否添加企业微信"
                            width="50">
                    </el-table-column>

                    <el-table-column
                            sortable="custom"
                            prop="contract_stock"
                            label="是否签约股票50"
                            width="50">
                    </el-table-column>

                    <el-table-column
                            sortable="custom"
                            prop="yield_enhanced_products"
                            label="是否签约QMT AI T+0等量化交易收益增强的产品"
                            width="100">
                    </el-table-column>

                    <el-table-column
                            sortable="custom"
                            prop="equity_public_offering"
                            label="是否配置权益类公募"
                            width="50">
                    </el-table-column>


                    <el-table-column
                            sortable="custom"
                            prop="small_t_one_assets"
                            label="是否配置公募50或基金投顾和其它不足百万的T1资产"
                            width="100">
                    </el-table-column>


                    <el-table-column
                            sortable="custom"
                            prop="stock_financing"
                            label="是否签约股票两融"
                            width="50">
                    </el-table-column>


                    <el-table-column
                            sortable="custom"
                            prop="more_t_one_assets"
                            label="是否配置微50和其它百万起点的T1资产"
                            width="100">
                    </el-table-column>


                    <el-table-column
                            sortable="custom"
                            prop="Private_equity_products"
                            label="是否配置百万起点的私募产品"
                            width="70">
                    </el-table-column>

                    <el-table-column
                            sortable="custom"
                            prop="configure_China"
                            label="是否配置中国50"
                            width="80">
                    </el-table-column>

                    <el-table-column
                            sortable="custom"
                            prop="remark"
                            label="备注"
                            width="200">
                    </el-table-column>


                    {#                    <el-table-column#}
                    {#                            prop="create_time"#}
                    {#                            label="创建时间"#}
                    {#                            width="100">#}
                    {#                    </el-table-column>#}
                    {##}
                    {#                    <el-table-column#}
                    {#                            prop="update_time"#}
                    {#                            label="修改时间"#}
                    {#                            width="100">#}
                    {#                    </el-table-column>#}

                    <el-table-column
                            prop="staff_id"
                            label="负责人"
                            width="120">
                    </el-table-column>

                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="130">
                        <template slot-scope="scope">

                            <el-button icon="el-icon-edit" size="mini" style="color:blue;"
                                       @click="handleEdit(scope.$index, scope.row)"></el-button>

                            <el-button
                                    icon="el-icon-delete" size="mini" style="color:orangered;"
                                    @click.native.prevent="deleteRow(scope.$index, schArr)"
                            >

                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>


        <div class="resource-page" style="margin-top:15px;">
            <!-- 分页区域 -->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[15, 30, 50, 75,100]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    class="fyDiv"
                    :total="total">
            </el-pagination>
        </div>

        {#    新增对话框#}
        <el-dialog
                title="新增客户信息"
                :visible.sync="addFormVisible"
                :close-on-click-modal="false"
                class="edit-form">
            <el-form :model="Form" label-position="left" label-width="300px" :rules="editFormRules">

                <el-form-item label="客户编号" prop="oid">
                    <el-input v-model="Form.oid" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="客户名称" prop="name">
                    <el-input v-model="Form.name" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="性别" prop="gender">
                    <el-radio v-model="Form.gender" label="男"></el-radio>
                    <el-radio v-model="Form.gender" label="女"></el-radio>
                </el-form-item>

                <el-form-item label="资产量">
                    <el-select v-model="Form.deposit_amount" placeholder="请选择资产量类型">
                        <el-option v-for="item in deposit_amount_choice" :key="item.id" :label=item.name
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="客户关系类型">
                    <el-select v-model="Form.customer_relationship_type" placeholder="请选择客户关系类型">
                        <el-option v-for="item in customer_relationship_type_choice" :key="item.id" :label=item.name
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="客户关系状态">
                    <el-select v-model="Form.customer_relationship_state_id" placeholder="请选择客户关系状态">
                        <el-option v-for="item in customer_relationship_state_choice" :key="item.id" :label=item.name
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="是否配置了聚金利、中金宝之类的保证金理财产品">
                    <el-radio v-model="Form.financial_product" label="是"></el-radio>
                    <el-radio v-model="Form.financial_product" label="否"></el-radio>
                </el-form-item>

                <el-form-item label="是否配置了大额存单等类货币基金产品">
                    <el-radio v-model="Form.fund_products" label="是"></el-radio>
                    <el-radio v-model="Form.fund_products" label="否"></el-radio>
                </el-form-item>

                <el-form-item label="是否配置了FI鑫投类和结构化类、债基、中金丰裕类固收以及固收+类产品">
                    <el-radio v-model="Form.investment_assets" label="是"></el-radio>
                    <el-radio v-model="Form.investment_assets" label="否"></el-radio>
                </el-form-item>


                <el-form-item label="是否添加企业微信">
                    <el-radio v-model="Form.add_weChat" label="是"></el-radio>
                    <el-radio v-model="Form.add_weChat" label="否"></el-radio>
                </el-form-item>

                <el-form-item label="是否签约股票50">
                    <el-radio v-model="Form.contract_stock" label="是"></el-radio>
                    <el-radio v-model="Form.contract_stock" label="否"></el-radio>
                </el-form-item>


                <el-form-item label="是否签约QMT AI T+0等量化交易收益增强的产品">
                    <el-radio v-model="Form.yield_enhanced_products" label="是"></el-radio>
                    <el-radio v-model="Form.yield_enhanced_products" label="否"></el-radio>
                </el-form-item>


                <el-form-item label="是否配置权益类公募">
                    <el-radio v-model="Form.equity_public_offering" label="是"></el-radio>
                    <el-radio v-model="Form.equity_public_offering" label="否"></el-radio>
                </el-form-item>

                <el-form-item label="是否配置公募50或基金投顾和其它不足百万的T1资产">
                    <el-radio v-model="Form.small_t_one_assets" label="是"></el-radio>
                    <el-radio v-model="Form.small_t_one_assets" label="否"></el-radio>
                </el-form-item>


                <el-form-item label="是否签约股票两融">
                    <el-radio v-model="Form.stock_financing" label="是"></el-radio>
                    <el-radio v-model="Form.stock_financing" label="否"></el-radio>
                </el-form-item>


                <el-form-item label="是否配置微50和其它百万起点的T1资产">
                    <el-radio v-model="Form.more_t_one_assets" label="是"></el-radio>
                    <el-radio v-model="Form.more_t_one_assets" label="否"></el-radio>
                </el-form-item>

                <el-form-item label="是否配置百万起点的私募产品">
                    <el-radio v-model="Form.Private_equity_products" label="是"></el-radio>
                    <el-radio v-model="Form.Private_equity_products" label="否"></el-radio>
                </el-form-item>

                <el-form-item label="是否配置中国50">
                    <el-radio v-model="Form.configure_China" label="是"></el-radio>
                    <el-radio v-model="Form.configure_China" label="否"></el-radio>
                </el-form-item>

                <el-form-item label="备注">
                    <el-input type="textarea" v-model="Form.remark"></el-input>
                </el-form-item>

                {#                <el-form-item label="负责人">#}
                {#                    <el-select v-model="Form.staff_id" placeholder="请选择负责人">#}
                {#                        <el-option v-for="item in staff_lis_choice" :key="item.id" :label=item.name#}
                {#                                   :value="item.id"></el-option>#}
                {#                    </el-select>#}
                {#                </el-form-item>#}

            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取消</el-button>

                <el-button type="primary" @click.native="handleSave('Form')">保存</el-button>
            </div>

        </el-dialog>

        {#    编辑对话框#}
        <el-dialog
                title="编辑客户信息"
                :visible.sync="FormVisible"
                :close-on-click-modal="false"
                class="edit-form"

                :before-close="handleClose">
            <el-form :model="Form" label-position="left" label-width="300px" :rules="editFormRules" ref="Form">

                <el-form-item label="客户编号" prop="oid">
                    <el-input v-model="Form.oid" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="客户名称" prop="name">
                    <el-input v-model="Form.name" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="性别" prop="gender">
                    <el-radio v-model="Form.gender" label="男"></el-radio>
                    <el-radio v-model="Form.gender" label="女"></el-radio>
                </el-form-item>

                <el-form-item label="资产量">
                    <el-select v-model="Form.deposit_amount" placeholder="请选择资产量类型">
                        <el-option v-for="item in deposit_amount_choice" :key="item.id" :label=item.name
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="客户关系类型">
                    <el-select v-model="Form.customer_relationship_type" placeholder="请选择客户关系类型">
                        <el-option v-for="item in customer_relationship_type_choice" :key="item.id" :label=item.name
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="客户关系状态">
                    <el-select v-model="Form.customer_relationship_state_id" placeholder="请选择客户关系状态">
                        <el-option v-for="item in customer_relationship_state_choice" :key="item.id" :label=item.name
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="是否配置了聚金利、中金宝之类的保证金理财产品">
                    <el-radio v-model="Form.financial_product" label="是"></el-radio>
                    <el-radio v-model="Form.financial_product" label="否"></el-radio>
                </el-form-item>

                <el-form-item label="是否配置了大额存单等类货币基金产品">
                    <el-radio v-model="Form.fund_products" label="是"></el-radio>
                    <el-radio v-model="Form.fund_products" label="否"></el-radio>
                </el-form-item>

                <el-form-item label="是否配置了FI鑫投类和结构化类、债基、中金丰裕类固收以及固收+类产品">
                    <el-radio v-model="Form.investment_assets" label="是"></el-radio>
                    <el-radio v-model="Form.investment_assets" label="否"></el-radio>
                </el-form-item>


                <el-form-item label="是否添加企业微信">
                    <el-radio v-model="Form.add_weChat" label="是"></el-radio>
                    <el-radio v-model="Form.add_weChat" label="否"></el-radio>
                </el-form-item>

                <el-form-item label="是否签约股票50">
                    <el-radio v-model="Form.contract_stock" label="是"></el-radio>
                    <el-radio v-model="Form.contract_stock" label="否"></el-radio>
                </el-form-item>


                <el-form-item label="是否签约QMT AI T+0等量化交易收益增强的产品">
                    <el-radio v-model="Form.yield_enhanced_products" label="是"></el-radio>
                    <el-radio v-model="Form.yield_enhanced_products" label="否"></el-radio>
                </el-form-item>


                <el-form-item label="是否配置权益类公募">
                    <el-radio v-model="Form.equity_public_offering" label="是"></el-radio>
                    <el-radio v-model="Form.equity_public_offering" label="否"></el-radio>
                </el-form-item>

                <el-form-item label="是否配置公募50或基金投顾和其它不足百万的T1资产">
                    <el-radio v-model="Form.small_t_one_assets" label="是"></el-radio>
                    <el-radio v-model="Form.small_t_one_assets" label="否"></el-radio>
                </el-form-item>


                <el-form-item label="是否签约股票两融">
                    <el-radio v-model="Form.stock_financing" label="是"></el-radio>
                    <el-radio v-model="Form.stock_financing" label="否"></el-radio>
                </el-form-item>


                <el-form-item label="是否配置微50和其它百万起点的T1资产">
                    <el-radio v-model="Form.more_t_one_assets" label="是"></el-radio>
                    <el-radio v-model="Form.more_t_one_assets" label="否"></el-radio>
                </el-form-item>

                <el-form-item label="是否配置百万起点的私募产品">
                    <el-radio v-model="Form.Private_equity_products" label="是"></el-radio>
                    <el-radio v-model="Form.Private_equity_products" label="否"></el-radio>
                </el-form-item>

                <el-form-item label="是否配置中国50">
                    <el-radio v-model="Form.configure_China" label="是"></el-radio>
                    <el-radio v-model="Form.configure_China" label="否"></el-radio>
                </el-form-item>

                <el-form-item label="备注">
                    <el-input type="textarea" v-model="Form.remark"></el-input>
                </el-form-item>

                {#                <el-form-item label="负责人">#}
                {#                    <el-select v-model="Form.staff_id" placeholder="请选择负责人">#}
                {#                        <el-option v-for="item in staff_lis_choice" :key="item.id" :label=item.name#}
                {#                                   :value="item.id"></el-option>#}
                {#                    </el-select>#}
                {#                </el-form-item>#}

            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click.native="handleCancel('Form')">取消</el-button>

                <el-button type="primary" @click.native="confirmEdit('Form')">确定</el-button>
            </div>

        </el-dialog>

        <el-dialog
                title="员工工作进展图表"
                :modal-append-to-body='false'
                :visible.sync="chartdialogVisible"
                width="50%"
                @open="open()"
                append-to-body>
            <div>
                {#                将表格数据分两列展示#}
                <el-row>
                    <el-col :span="12">
                        <el-form label-position="left" :model="form_performance" label-width="200px">
                            {#                            <el-form-item label="所属团队">#}
                            {#                                <el-input style="width: 60px" v-model="form_performance.level" disabled></el-input>#}
                            {#                            </el-form-item>#}
                            <el-form-item label="客户数量">
                                <el-input style="width: 60px" v-model="form_performance.customer_count"
                                          disabled></el-input>
                            </el-form-item>
                            <el-form-item label="保证金理财产品签约数">
                                <el-input style="width: 60px" v-model="form_performance.financial_product_count"
                                          disabled></el-input>
                            </el-form-item>
                            <el-form-item label="货币基金产品配置客户数数">
                                <el-input style="width: 60px" v-model="form_performance.fund_products_count"
                                          disabled></el-input>
                            </el-form-item>
                            <el-form-item label="固定收益产品配置客户数">
                                <el-input style="width: 60px" v-model="form_performance.investment_assets_count"
                                          disabled></el-input>
                            </el-form-item>
                            <el-form-item label="企业微信客户添加数">
                                <el-input style="width: 60px" v-model="form_performance.add_weChat_count"
                                          disabled></el-input>
                            </el-form-item>
                            <el-form-item label="股票50签约数">
                                <el-input style="width: 60px" v-model="form_performance.contract_stock_count"
                                          disabled></el-input>
                            </el-form-item>

                            <el-form-item label="量化T+0签约数">
                                <el-input style="width: 60px" v-model="form_performance.yield_enhanced_products_count"
                                          disabled></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="12">
                        <el-form label-position="left" :model="form_performance" label-width="200px">

                            <el-form-item label="量化T+0签约数">
                                <el-input style="width: 60px" v-model="form_performance.yield_enhanced_products_count"
                                          disabled></el-input>
                            </el-form-item>
                            <el-form-item label="权益公募配置客户数">
                                <el-input style="width: 60px" v-model="form_performance.equity_public_offering_count"
                                          disabled></el-input>
                            </el-form-item>
                            <el-form-item label="公募50配置客户数">
                                <el-input style="width: 60px" v-model="form_performance.small_t_one_assets_count"
                                          disabled></el-input>
                            </el-form-item>
                            <el-form-item label="两融业务签约数">
                                <el-input style="width: 60px" v-model="form_performance.stock_financing_count"
                                          disabled></el-input>
                            </el-form-item>
                            <el-form-item label="百万T1签约数">
                                <el-input style="width: 60px" v-model="form_performance.more_t_one_assets_count"
                                          disabled></el-input>
                            </el-form-item>
                            <el-form-item label="百万私募签约数">
                                <el-input style="width: 60px" v-model="form_performance.Private_equity_products_count"
                                          disabled></el-input>
                            </el-form-item>
                            <el-form-item label="中国50签约数">
                                <el-input style="width: 60px" v-model="form_performance.configure_China_count"
                                          disabled></el-input>
                            </el-form-item>
                            <el-form-item label="员工总工分">
                                <el-input style="width: 60px" v-model="form_performance.staff_score"
                                          disabled></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </div>
            <div id="myChart" style="width:100%;height:400px;padding-top:40px"></div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="chartdialogVisible = false">取 消</el-button>
             <el-button type="primary" @click="chartdialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

    </div>






{% endblock %}


{% block JSI %}
    <script src="{% static 'axios/axios.min.js' %}"></script>
    <script src="{% static 'vue/vue.js' %}"></script>
    <script src="{% static 'elementui/index.js' %}"></script>

    <script>
        var _index;
        new Vue({
            el: '#app',
            delimiters: ["[[", "]]"],
            data: {
                loading: false,   // 默认为false不显示加载
                inputText: "",    //搜索框的值
                sort_method_list: [
                    {id: 1, name: '按照客户姓名升序排序'},
                    {id: 2, name: '按照客户姓名降序排序'},
                    {id: 3, name: '按照客户编号升序排序'},
                    {id: 4, name: '按照客户编号降序排序'},

                ],//排序方式列表
                schArr: [], // 此数组会由getBlogList()函数调用由articleList[]数组提取的部分数据存入来控制页面显示数据条数
                tableData: [],
                addFormVisible: false,
                //编辑对话框
                chartdialogVisible: false,
                FormVisible: false,
                //绩效数据
                form_performance: {
                    name: '',
                    level: '',
                    team: '',
                    customer_count: '',
                    customer_count_contract: '',
                    financial_product_count: '',
                    fund_products_count: '',
                    investment_assets_count: '',
                    add_weChat_count: '',
                    contract_stock_count: '',
                    yield_enhanced_products_count: '',
                    equity_public_offering_count: '',
                    small_t_one_assets_count: '',
                    stock_financing_count: '',
                    more_t_one_assets_count: '',
                    Private_equity_products_count: '',
                    configure_China_count: '',

                    staff_score: '',
                },

                Form: {
                    oid: 0,
                    name: '',
                    gender: false,
                    deposit_amount: '',
                    customer_relationship_type: '',
                    customer_relationship_state_id: '',
                    financial_product: false,
                    fund_products: false,
                    investment_assets: false,
                    add_weChat: false,
                    contract_stock: false,
                    yield_enhanced_products: false,
                    equity_public_offering: false,
                    small_t_one_assets: false,
                    stock_financing: false,
                    more_t_one_assets: false,
                    Private_equity_products: false,
                    configure_China: false,
                    is_delete: false,
                    remark: '',
                    staff_id: '',
                },
                editFormRules: {
                    oid: [
                        {required: true, message: '请输入客户编号', trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '请输入客户姓名', trigger: 'blur'}
                    ],
                    gender: [
                        {required: true, message: '请选择性别', trigger: 'blur'}
                    ],
                    staff_id: [
                        {required: true, message: '请输入负责人', trigger: 'blur'}
                    ],
                },

                deposit_amount_choice: '',
                customer_relationship_type_choice: '',
                customer_relationship_state_choice: '',
                staff_lis_choice: '',

                // 总数
                total: 0,
                currentPage: 1,
                pagesize: 100,
                user_num: 0,
                option: {
                    title: {
                        text: 'World Population'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        //单位%
                        axisLabel: {
                            formatter: '{value} %'
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
                    },
                    series: [
                        {
                            color: ['#00ff00'],
                            name: '2011',
                            type: 'bar',
                            data: [18203, 23489, 29034, 104970, 131744, 630230]
                        },
                    ]
                },
            },
            created() {
                this.receive_data();

            },
            methods: {
                getUserEchartData() {
                    this.chartdialogVisible = true;
                    axios.post('/dashboard/statistics/', {
                        user_num: this.user_num,
                    }).then(response => {
                        if (!response.data.code) {
                            this.$message({
                                message: response.data.msg,
                                type: 'error'
                            });
                        } else {
                            {#console.log(response.data);#}
                            console.log('success');
                            this.form_performance = response.data.single_data;
                            this.option.yAxis.data = response.data.yAxis_data;
                            this.option.title.text = response.data.title + '的客户签约率';
                            this.option.series[0].data = response.data.series_data;
                            this.option.series[0].name = '签约率';
                            console.log(this.option);
                            this.initEchartData();
                        }
                    }).catch(error => {
                        console.log(error);
                    })
                },


                initEchartData() {
                    var dom = document.getElementById("myChart");
                    {#console.log(dom);#}
                    let myChart = echarts.init(dom);
                    {#console.log('myChart', myChart)#}
                    // 绘制图表失败
                    myChart.setOption(this.option);

                    {#console.log(dom);#}
                },

                open() {
                    this.$nextTick(() => {
                        //  执行echarts方法
                        this.initEchartData()
                    })
                },
                handleSave() {
                    console.log('submit!');

                    axios.post('/customer/add/', {
                        content: this.Form
                    }).then(res => {
                        if (res.status) {
                            //消息提示
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                            this.schArr.push(this.Form);
                            this.addFormVisible = false;
                            this.receive_data()
                        } else {
                            this.$message({
                                message: '添加失败',
                                type: 'error'
                            });
                        }

                    })
                },


                addRow() {
                    //将Form表单清空
                    this.Form = {
                        oid: '',
                        name: '',
                        gender: '男',
                        deposit_amount: '低于30万',
                        customer_relationship_type: '主投顾关系',
                        customer_relationship_state_id: '电话拒听的客户',
                        financial_product: '否',
                        fund_products: '否',
                        investment_assets: '否',
                        add_weChat: '否',
                        contract_stock: '否',
                        yield_enhanced_products: '否',
                        equity_public_offering: '否',
                        small_t_one_assets: '否',
                        stock_financing: '否',
                        more_t_one_assets: '否',
                        Private_equity_products: '否',
                        configure_China: '否',
                        is_delete: '否',
                        staff_id: '',
                    };
                    this.addFormVisible = true;

                },
                //排序方法
                sortChange(column) {
                    //如果是oid字段则进行排序
                    if (column.prop === 'oid') {
                        if (column.order === 'ascending') {
                            this.schArr.sort(function (a, b) {
                                return a.oid - b.oid;
                            });
                        } else {
                            this.schArr.sort(function (a, b) {
                                return b.oid - a.oid;
                            });
                        }
                    } else {
                        //按照字段名进行排序
                        if (column.order === 'ascending') {
                            this.schArr.sort(function (a, b) {
                                return a[column.prop].localeCompare(b[column.prop]);
                            });
                        } else {
                            this.schArr.sort(function (a, b) {
                                return b[column.prop].localeCompare(a[column.prop]);
                            });
                        }
                    }

                },

                search() {
                    if (this.inputText) {
                        {#console.log(this.inputText);#}
                        this.schArr = this.tableData.filter(item => {
                            return item.name.indexOf(this.inputText) > -1
                        })
                    } else {
                        this.schArr = this.tableData
                    }
                },


                //点击编辑
                handleEdit: function (index, row) {
                    this.FormVisible = true;
                    this.Form = Object.assign({}, row); //这句是关键！！！
                    _index = index;


                },
                // 点击确定（编辑）
                confirmEdit() {
                    var editdata = _index;
                    {#console.log(editdata);#}

                    this.tableData[editdata] = this.Form;


                    //向后台发送数据
                    axios.post('/customer/edit/', {
                        content: this.Form,

                    }).then(response => {
                        console.log('123', response.data);
                        if (response.data.status) {
                            this.$message({
                                message: response.data.message,
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: response.data.message,
                                type: 'error'
                            });
                        }

                        //刷新页面
                        this.FormVisible = false;
                        this.receive_data();
                    }).catch(error => {
                        console.log(error.response);
                        this.$message({
                            message: '该客户没有对应的员工，请通过数据库将其分配',
                            type: 'error'
                        });
                    })
                },
                //点击关闭dialog
                handleClose(done) {
                    //  done();
                    //  location.reload();
                    this.FormVisible = false;
                },
                //点击取消
                handleCancel(formName) {
                    this.FormVisible = false;
                },


                handleSizeChange(val) {
                    {#console.log(`每页 ${val} 条`);#}
                    this.pagesize = val;
                    this.getPageData();
                    {#console.log(this.pagesize);#}
                },
                handleCurrentChange(val) {
                    {#console.log(`当前页: ${val}`);#}
                    this.currentPage = val;
                    this.getPageData();
                    {#console.log(this.currentPage);#}
                },

                deleteRow(index, rows) {
                    //获取当前行对象
                    let row = rows[index].oid;
                    console.log(row);
                    //提示框
                    this.$confirm('是否删除该客户, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //删除数据
                        axios.post('/customer/delete/', {
                            id: rows[index].oid,
                            staff_id: rows[index].staff_id,
                        }).then(response => {
                            console.log(response.data.status);
                            if (response.data.status) {
                                //删除数据
                                rows.splice(index, 1);
                                //消息提示
                                this.$message({
                                    message: response.data.msg,
                                    type: 'success'
                                });
                                //1秒后刷新页面
                                setTimeout(function () {
                                    window.location.reload();
                                }, 1000);

                            } else {
                                this.$message({
                                    message: response.data.errors,
                                    type: 'error'
                                });
                            }
                        }).catch(error => {
                            console.log(error);
                        });

                        //加载数据
                        {#this.receive_data();#}
                        //刷新页面

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                headStyle() {
                    return "text-align:center;background-color:#f2f2f2;color:#000000;font-weight:bold;font-size:14px";
                },


                cellStyle({row, column, rowIndex, columnIndex}) {
                    //将表格中字符串为'是'的单元格背景色设置为绿色
                    if (row[column.property] === '是') {
                        return 'text-align:center;color:#0f0f0f;background-color:#ccffcc';
                    } else if (row[column.property] === '否') {
                        return 'text-align:center;color:#0f0f0f;background-color:#ffe5e5';
                    } else {
                        return "text-align:center;"
                    }

                },

                // 根据分页设置的数据控制每页显示的数据条数及页码跳转页面刷新
                getPageData() {

                    let start = (this.currentPage - 1) * this.pagesize;
                    let end = start + this.pagesize;
                    //返回数据过多，导致页面卡顿，所以只返回当前页的数据
                    this.schArr = this.tableData.slice(start, end);

                },


                //接收后端EXPERIMENTAL_BASIC_API的数据
                receive_data() {

                    var self = this;
                    self.loading = true;
                    axios.get('/customer/post/').then(function (response) {
                        //根据每页显示的数量处理数据显示个数

                        self.tableData = response.data.customer_data;
                        //返回数据过多时，分页显示
                        self.total = self.tableData.length;

                        self.loading = false
                        self.deposit_amount_choice = response.data.res_choice.deposit_amount_choice;
                        self.user_num = response.data.user_num;
                        self.customer_relationship_type_choice = response.data.res_choice.customer_relationship_type_choice;
                        self.customer_relationship_state_choice = response.data.res_choice.customer_relationship_state_choice;
                        self.staff_lis_choice = response.data.res_choice.staff_lis_choice;
                        {#console.log(self.deposit_amount_choice, self.customer_relationship_type_choice, self.customer_relationship_state_choice);#}
                        self.getPageData();

                    }).catch(function (error) {
                        console.log(error);
                    });
                }
            }
        })
    </script>






{% endblock %}